<template>
  <!--
          作者：luoyiming
          时间：2019-10-24
          描述：统计-会员统计-新增会员
      -->
  <div class="ww100 mt30">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="新增会员" name="new"></el-tab-pane>
      <el-tab-pane label="成交会员数" name="pay"></el-tab-pane>
    </el-tabs>
    <div class="d-s-c">
      <div style="display:inline-block">
        <el-date-picker
          size="small"
          v-model="datePicker"
          type="daterange"
          align="right"
       
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <el-button size="small" type="success" @click="onExport">导出</el-button>
      </div>
      <div style="display:inline-block;margin-left: 30px" v-if="activeName=='new'">
        新增会员总数: <span class="f20 fb gray3">{{ new_total }}</span>
        新增推广总数:<span class="f20 fb gray3">{{ referee_total }}</span>
      </div>
      <div style="display:inline-block;margin-left: 30px" v-if="activeName=='pay'">
        成交会员总数:<span class="f20 fb gray3">{{ pay_total }}</span>

      </div>
    </div>
    <div class="">
      <div class="Echarts">
        <div id="LineChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import StatisticsApi from '@/api/statistics.js';
import {formatDate} from '@/utils/DateTime.js'
import qs from 'qs';
export default {
  data() {
    let endDate = new Date();
    let startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
    return {
      /*是否正在加载*/
      loading: true,
      /*类别*/
      activeName: 'new',
      /*时间快捷选项*/
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      datePicker: [formatDate(startDate, 'yyyy-MM-dd'), formatDate(endDate, 'yyyy-MM-dd')],
      /*数据对象*/
      dataList: null,
      /*交易统计图表对象*/
      myChart: null,
      /*图表数据*/
      option: {
        title: {
          //text: 'ECharts 入门示例'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {}
      }
    };
  },
  created() {

  },
  mounted() {
    this.myEcharts();
  },
  computed: {
    new_total() {
      if (this.activeName === "pay") return 0;
      const {data} = this.dataList || {data: []};
      if (!data || data.length === 0) return 0;
      let total = 0;
      data.forEach(item => {
        total += parseFloat(item.total_num);
      })
      return total;
    },
    referee_total() {
      if (this.activeName === "pay") return 0;
      const {data} = this.dataList || {data: []};
      if (!data || data.length === 0) return 0;
      let total = 0;
      data.forEach(item => {
        total += parseFloat(item.referee_num);
      })
      return total;
    },
    pay_total() {
      if (this.activeName === "new") return 0;
      const {data} = this.dataList || {data: []};
      if (!data || data.length === 0) return 0;
      let total = 0;
      data.forEach(item => {
        total += parseFloat(item.total_num);
      })
      return total;
    }
  },
  methods: {

    onExport: function () {
  
      let form = {search_time: this.datePicker, type:this.activeName};
      console.log('form',form)

      let baseUrl =
        process.env.NODE_ENV === "development"
          ? window.location.protocol + "//" + window.location.host
          : process.env.VUE_APP_API_URL;
      window.location.href = baseUrl + '/index.php/supplier/statistics.user/newUserExport?' + qs.stringify(form);
    },

    /*切换*/
    handleClick(e) {
      this.getData();
    },

    /*选择时间*/
    changeDate() {
      this.getData();
    },

    /*创建图表对象*/
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('LineChart'));
      /*获取列表*/
      this.getData();
    },

    // /*格式数据*/
    // createOption() {
    //   if (!this.loading) {
    //     let names = [];
    //     let xAxis = this.dataList.days;
    //     let series1 = [];
    //     // let series2 = [];
    //     this.dataList.data.forEach(item => {
    //       series1.push(item.total_num);
    //       // if (this.activeName == 'new') {
    //       //   series2.push(item.referee_num);
    //       // }
    //     });
    //     if (this.activeName == 'new') {
    //       names = ['新增会员数','新增推广会员'];
    //     } else if (this.activeName == 'refund') {
    //       names = ['成交会员数'];
    //     }

    //     // 指定图表的配置项和数据
    //     this.option.xAxis = {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: xAxis
    //     };
    //     this.option.color = ["red", "#409EFF"];

    //     this.option.legend = {
    //       data: [{name: names[0], color: '#ccc'}]
    //     };
    //     this.option.series = [
    //       {
    //         name: names[0],
    //         type: 'line',
    //         data: series1,
    //         lineStyle: {
    //           color: 'red'
    //         }
    //       }
    //     ];
    //     if (this.activeName == 'new') {
    //       this.option.legend.data.push( { name: names[1] });
    //       // this.option.series.push({
    //       //     name: names[1],
    //       //     type: 'line',
    //       //     data: series2,
    //       //     lineStyle: {
    //       //       color: '#409EFF'
    //       //     }
    //       //   }
    //       // );
    //     }
    //     this.myChart.setOption(this.option,true);
    //     this.myChart.resize();
    //   }
    // },
      /*格式数据*/
    createOption() {
      if (!this.loading) {
        let names = [];
        let xAxis = this.dataList.days;
        let series1 = [];
        let series2 = [];
        this.dataList.data.forEach(item => {
          series1.push(item.total_num);
          if (this.activeName == 'new') {
            series2.push(item.referee_num);
          }
        });
        if (this.activeName == 'new') {
          names = ['新增会员数',"新增推广会员"];
        } else if (this.activeName == 'refund') {
          names = ['成交会员数'];
        }

        // 指定图表的配置项和数据
        this.option.xAxis = {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        };
        this.option.color = ["red", "#409EFF"];

        this.option.legend = {
          data: [{name: names[0], color: '#ccc'}]
        };
        this.option.series = [
          {
            name: names[0],
            type: 'line',
            data: series1,
            lineStyle: {
              color: 'red'
            }
          }
        ];
        if (this.activeName == 'new') {
          this.option.legend.data.push( { name: names[1] });
          this.option.series.push({
              name: names[1],
              type: 'line',
              data: series2,
              lineStyle: {
                color: '#409EFF'
              }
            }
          );
        }
        this.myChart.setOption(this.option,true);
        this.myChart.resize();
      }
    },

    /*获取列表*/
    getData() {
      let self = this;
      self.loading = true;

      let UserApi = null;

      if (this.activeName == 'new') {
        UserApi = StatisticsApi.getNewUser;
      }

      if (this.activeName == 'pay') {
        UserApi = StatisticsApi.getPayUser;
      }

      UserApi(
        {
          search_time: self.datePicker,
          type:this.activeName
        },
        true
      )
        .then(res => {
          self.dataList = res.data;
          self.loading = false;
          self.createOption();
        })
        .catch(error => {
        });
    }
  }
};
</script>

<style scoped="scoped">
.Echarts {
  box-sizing: border-box;
}

.Echarts > div {
  width: 100%;
  height: 360px;
  box-sizing: border-box;
}
</style>
